<template>
  <div>
    <!-- <h1>About  ---  {{ $store.state.Li.name }}</h1> -->
    <!-- <p>
      {{ $store.state.count }}   --- {{ count }}
    </p>
    <p>
      {{ $store.state.num }}
    </p>

    <h3>
      getters:  {{ $store.getters.newCount }}   --- {{ newCount }}
    </h3> -->


    <!-- 辅助函数配合modules -->
    {{ name }}

    <h3>
      {{ newCount }}
    </h3>
  </div>
</template>

<script>
// vuex中的辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// mapState  映射vuex中的State到当前组件的this上

// console.log(mapState)

export default {
  computed: {
    // mapState([需要使用的数据])
    // ...mapState(['count']),
    // ...mapState({
    //   count: (state) => {
    //     return state.count
    //   }
    // })
    // ...mapGetters(["newCount"])


    // 辅助函数配合modules
    ...mapState("Zhang", ["name"]),
    ...mapGetters("Zhang", ["newCount"])
  },
  created() {
    // this.fn()
    // this.init()
    // console.log(mapState)


    // console.log(mapMutations(["fn"]))
    // this.$store.commit("")
    // this.$store.dispatch("")


    // 辅助函数配合modules
    this.changeName()
    this.init()
  },
  methods: {
    // ...mapMutations(["fn"]),
    // ...mapActions(["init"])


    // 辅助函数配合modules
    ...mapMutations("Zhang", ["changeName"]),
    ...mapActions("Zhang", ["init"])
  }
}
</script>

<style>

</style>